import React, { useMemo, useEffect } from "react"
import {
    Button,
    Checkbox,
    Divider,
    Drawer,
    Empty,
    Form,
    Icon,
    ImgDefault,
    Input,
    InputNumber,
    message,
    Modal,
    Popover,
    Progress,
    Radio,
    Select,
    Space,
    Spin,
    Steps,
    Switch,
    Tooltip,
    ImgUpload,
    imgPreview,
    Table,
    Tag
} from "@bytedance/mona-ui"
import db from "@tools/indexDB";
import { useAppDispatch, useAppSelector } from "~store"
import { AutoTk } from "~store/controller/funcTabs"
import { fontStopConten } from './formatFunc'

function CreatedStatusPage(props: any) {
    const { lodinData, setMaxvisible, setMaxVisibleFunc, setShowCopyBox } = props
    if (!lodinData) return null
    const { progress, getImageIndex, copyMaxlen, status, taskId } = lodinData

    const [tableData, setTableData] = React.useState<any>([])
    const tikclom = [{
        title: '商品信息',
        dataIndex: 'title',
        width: 300,
        render: (text: any, record: any) => {
            return <Space direction="vertical">
                <Space>
                    <ImgDefault
                        imgSrc={(() => {
                            const imgae = record.img[0]?.url?.replace("obj/", "")
                            return imgae + "~110x110_q75.image"
                        })()}
                        mask={false}
                        width={60}
                        height={60}></ImgDefault>
                    <Space direction="vertical" size={4}>
                        <div
                            className="title"
                            style={{
                                fontSize: 12,
                                color: "#252931"
                            }}>
                            {record.title}
                        </div>
                        {record.data.code == 10000 &&
                            <div
                                className="isduer"
                                style={{
                                    color: "#898b8f",
                                    fontSize: 12
                                }}>
                                ID:{record.data?.data?.product_id}
                                <Icon
                                    type="CopyIcon"
                                    className="copyiconitem"
                                    style={{
                                        marginLeft: 5,
                                        cursor: "pointer"
                                    }}
                                    onClick={() => copyToClipboard(record.data?.data?.product_i)}
                                />
                            </div>
                        }
                    </Space>
                </Space>

            </Space>
        }
    },
    {
        title: '原商品ID',
        dataIndex: 'olderLiter'

    },
    {
        title: '创建时间',
        dataIndex: 'creted_time'

    },
    {
        title: '创建状态',
        width: 330,
        render: (text: any, record: any) => {
            if (record.data.code === 10000) {
                return <Tag type="success">裂变成功</Tag>
            }
            return <Space direction="vertical">
                <Tag type="error">裂变失败</Tag>
                <div
                    className="isduer"
                    style={{
                        color: "#898b8f",
                        fontSize: 12,

                    }}>
                    {record.data.msg}: {record.data.sub_msg}
                </div>
            </Space>
        }
    }]
    function copyToClipboard(text) {
        navigator.clipboard
            .writeText(text)
            .then(function () {
                message.success("复制成功")
            })
            .catch(function (err) {
                message.error("复制失败")
            })
    }
    useMemo(async () => {
        const getData = await db.copyMaxProdecttask.get(taskId);
        if (getData) {
            console.log('getData', getData)
            setTableData(getData.list)
        }
    }, [getImageIndex])
    useMemo(() => {
        setTableData([])
    }, [setMaxvisible])

    useEffect(() => {
        if (status == 'start') {
            window.onbeforeunload = function (event) {
                return "您正在AI创建商品中，是否确认离开" // 新版本浏览器不起作用
            }
        } else {
            window.onbeforeunload = null
        }
    }, [status])
    const dispatch = useAppDispatch()
    return <Space direction="vertical" align="center" style={{
        width: '100%',
        paddingTop: 80
    }}
        size={15}
    >
        <Spin spinning={status == "start"}>
            <div
                style={{
                    height: 120
                }}
            >
                {status == 'end' && <svg
                    width="120"
                    height="120"
                    viewBox="0 0 120 120"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_445_33713)">
                        <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M60 93C78.2254 93 93 78.2254 93 60C93 41.7746 78.2254 27 60 27C41.7746 27 27 41.7746 27 60C27 78.2254 41.7746 93 60 93ZM77.6492 53.4642C79.1589 51.49 78.7823 48.6658 76.8081 47.1561C74.8339 45.6464 72.0097 46.023 70.5 47.9972L55.4514 66.1288L48.5523 58.7345C47.0265 56.7727 44.1992 56.4193 42.2375 57.9451C40.2757 59.471 39.9223 62.2982 41.4481 64.26L51.9295 76.26C52.786 77.3613 54.1049 78.003 55.5 77.9973C56.8951 77.9915 58.2087 77.3391 59.0562 76.2308L77.6492 53.4642Z"
                            fill="#397BFF"
                        />
                        <path
                            opacity="0.1"
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M22.5 2C22.5 0.895431 21.6046 0 20.5 0H15.5C14.3954 0 13.5 0.895431 13.5 2L13.5 13.5H2C0.895431 13.5 0 14.3954 0 15.5V20.5C0 21.6046 0.895431 22.5 2 22.5H13.5L13.5 34C13.5 35.1046 14.3954 36 15.5 36H20.5C21.6046 36 22.5 35.1046 22.5 34V22.5H34C35.1046 22.5 36 21.6046 36 20.5V15.5C36 14.3954 35.1046 13.5 34 13.5H22.5V2Z"
                            fill="#397BFF"
                        />
                        <path
                            opacity="0.3"
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M113.25 68C113.25 66.8954 112.355 66 111.25 66H110.75C109.645 66 108.75 66.8954 108.75 68V72.75H104C102.895 72.75 102 73.6454 102 74.75V75.25C102 76.3546 102.895 77.25 104 77.25H108.75V82C108.75 83.1046 109.645 84 110.75 84H111.25C112.355 84 113.25 83.1046 113.25 82V77.25H118C119.105 77.25 120 76.3546 120 75.25V74.75C120 73.6454 119.105 72.75 118 72.75H113.25V68Z"
                            fill="#397BFF"
                        />
                        <path
                            opacity="0.4"
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M76.7734 104C76.7734 102.895 75.878 102 74.7734 102H74.2734C73.1689 102 72.2734 102.895 72.2734 104V108.75H67.5234C66.4189 108.75 65.5234 109.645 65.5234 110.75V111.25C65.5234 112.355 66.4189 113.25 67.5234 113.25H72.2734V118C72.2734 119.105 73.1689 120 74.2734 120H74.7734C75.878 120 76.7734 119.105 76.7734 118V113.25H81.5234C82.628 113.25 83.5234 112.355 83.5234 111.25V110.75C83.5234 109.645 82.628 108.75 81.5234 108.75H76.7734V104Z"
                            fill="#397BFF"
                        />
                    </g>
                    <defs>
                        <clipPath id="clip0_445_33713">
                            <rect width="120" height="120" fill="white" />
                        </clipPath>
                    </defs>
                </svg>}
                {status == 'stop' && <Icon style={{
                    width: 120,
                    height: 120,
                    color: '#397BFF',
                    fontSize: 80
                }} type="InfoIcon"></Icon>}
                {/* {status == 'end' && <Icon style={{
                    width: 120,
                    height: 120,
                    color: '#397BFF'
                }} type="InfoIcon"></Icon>} */}
            </div>
        </Spin>

        <h2
            style={{
                textAlign: "center"
            }}>
            {status == "start" ? '正在使用精简模式创建商品请勿关闭或刷新浏览器，窗口' : status == "stop" ? '已手动停止裂变' : status == "end" ? '裂变完成' : ''}
        </h2>



        <Space>
            <span>创建进度：</span>
            <Progress percent={progress} style={{
                width: 400
            }} />
            <span>{getImageIndex}/{copyMaxlen}</span>

        </Space>
        <Space align="center">
            <h4 style={{
                marginBottom: 0
            }}>{status === 'end' ? '处理完成' : status === 'shop' ? '已手动停止' : `正在创建第${getImageIndex + 1}个商品`}</h4>
            {status == 'start' && <Button type="primary" danger onClick={() => {
                console.log('调用停止创建')
                fontStopConten()
            }} size="small">
                停止裂变
            </Button>}

        </Space>
        {(status === 'end' || status === 'shop') && <Space size={8} align="center">
            <Button
                type="primary"
                onClick={() => {
                    open("https://fxg.jinritemai.com/ffa/creative/tools?materialType=24")
                }}>
                我要投稿
            </Button>
            <Button onClick={() => setMaxVisibleFunc(false)}>
                继续裂变
            </Button>
            <Button
                onClick={() => {
                    setShowCopyBox(false)
                    setMaxVisibleFunc(false)
                    const shcerDater: any = document.querySelector(".ecom-g-btn-dashed")
                    shcerDater && shcerDater.click()
                }}>
                返回商品列表
            </Button>
            <Button onClick={() => dispatch(AutoTk(""))} icon={<Icon type="OrderExportIcon"></Icon>}>自动拍单</Button>
            <Button style={{ marginLeft: 10 }} onClick={() => { window.open("http://dym.11daifa.com/") }}>
                <img src="https://dym.11daifa.com/favicon.ico" style={{ width: 16, height: 16, marginRight: 5, marginBottom: 3 }} />
                礼品网
            </Button>
        </Space>}
        <Table style={{
            width: 1000
        }} dataSource={tableData} columns={tikclom} rowKey="creted_time"
            scroll={{
                y: 600
            }}
        >
        </Table>
    </Space>
}
export default CreatedStatusPage